<template>
  <div id='tmpl'>
      <!-- 1.0 实现新闻详情 -->
      <div class="title">
          <h4>{{info.title}}</h4>
          <p>{{info.add_time | datefmt('YYYY-MM-DD')}}  {{info.click}}次浏览量</p>
      </div>
      <div id="content" v-html="info.content">
          
      </div>

      <!-- 2.0 实现评论组件的集成 -->
      <!-- 10.2实现评论组件 -->
      <comment :id='id'></comment>
  </div>
</template>
<script>
import common from '../../kits/common.js';
//10.0 导入评论组件 comment.vue
import comment from '../subcom/comment.vue';
export default {
    components:{
        comment  //10.1注册评论组件
    },
    data(){
       return {
           id:0,
           info:{}
       }
    },
    created(){
        //1.0 获取url传入的id参数值赋值给data中的id属性
        this.id = this.$route.params.id;

        //2.0 请求服务器获取到这个id对应的详情数据对象
        this.getinfo();
    },
    methods:{
        getinfo(){
            //1.0 确定url
            var url = common.apidomain+'/api/getnew/'+this.id;

            //2.0 发出ajax请求数据
            this.$http.get(url).then(function(res){
                var body = res.body;
                
                //3.0判断返回的数据是否正常
                if(body.status != 0){
                    alert(body.mssage);
                    return;
                }

                //4.0 赋值
                this.info = body.message[0];
            
            })
        }
    }
}
</script>
<style lang="css" scoped>
    .title h4{
        color: #0094ff;
    }
    .title p{
        color: rgba(0, 0, 0, 0.4);
    }
    .title,#content{
        padding: 5px;
    }
</style>